<template>
  <div class="table-section" :class="{ 'is-default': mode === 'default' }">
    <!-- 多表模式：每种状态一个独立表格 -->
    <div
      v-if="Array.isArray(multiTables) && multiTables.length"
      class="table-group"
    >
      <div class="group-item" v-for="(t, idx) in multiTables" :key="idx">
        <div class="group-title" v-if="t.title">{{ t.title }}</div>
        <!-- 默认排序表格（每组） -->
        <el-table
          v-if="t.mode === 'default'"
          :data="t.data || []"
          border
          style="width: 100%"
          :max-height="t.maxHeight || 520"
        >
          <el-table-column
            prop="region"
            label="区县"
            align="center"
            width="140"
          />
          <el-table-column
            prop="companyName"
            label="企业名称"
            min-width="260"
            align="center"
          />
          <el-table-column
            prop="address"
            label="单位地址"
            align="center"
            min-width="260"
          />
          <el-table-column label="联系电话" align="center" min-width="220">
            <template slot-scope="scope">
              <div class="contact-cell">{{ scope.row.contact }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            min-width="200"
          />
        </el-table>

        <!-- 排名表格（每组） -->
        <el-table
          v-else
          :data="t.data || []"
          border
          style="width: 100%"
          :max-height="t.maxHeight || 520"
        >
          <el-table-column
            label="排名"
            type="index"
            :index="(i) => computeIndex(t.startIndex, i)"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="computeIndex(t.startIndex, scope.$index) === 1"
                class="rank-badge gold"
                >1</span
              >
              <span
                v-else-if="computeIndex(t.startIndex, scope.$index) === 2"
                class="rank-badge silver"
                >2</span
              >
              <span
                v-else-if="computeIndex(t.startIndex, scope.$index) === 3"
                class="rank-badge bronze"
                >3</span
              >
              <span v-else class="rank-number">{{
                computeIndex(t.startIndex, scope.$index) || scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="companyName"
            label="企业名称"
            align="center"
            min-width="300"
          />
          <!-- 多指标列（优先） -->
          <template
            v-if="
              Array.isArray(t.rankExtraColumns) && t.rankExtraColumns.length
            "
          >
            <el-table-column
              v-for="col in t.rankExtraColumns"
              :key="col.prop"
              :prop="col.prop"
              :label="col.label"
              :align="col.align || 'center'"
              :width="col.width || 160"
              :min-width="col.minWidth"
            >
              <template slot-scope="scope">
                <span>{{ formatRankThird(scope.row[col.prop]) }}</span>
              </template>
            </el-table-column>
          </template>
          <!-- 单指标列（回退） -->
          <template v-else>
            <el-table-column
              :prop="t.rankThirdProp || rankThirdProp"
              :label="t.rankThirdLabel || rankThirdLabel"
              align="center"
              width="260"
            >
              <template slot-scope="scope">
                <span>{{
                  formatRankThird(scope.row[t.rankThirdProp || rankThirdProp])
                }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>

    <!-- 单表模式（兼容旧用法） -->
    <template v-else>
      <!-- 默认排序表格 -->
      <el-table
        v-if="mode === 'default'"
        :data="data"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="region"
          label="区县"
          align="center"
          width="140"
        />
        <el-table-column
          prop="companyName"
          label="企业名称"
          min-width="260"
          align="center"
        />
        <el-table-column
          prop="address"
          label="单位地址"
          align="center"
          min-width="260"
        />
        <el-table-column label="联系电话" align="center" min-width="220">
          <template slot-scope="scope">
            <div class="contact-cell">{{ scope.row.contact }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
          min-width="200"
        />
      </el-table>

      <!-- 排名表格 -->
      <el-table
        v-else
        :data="data"
        border
        style="width: 100%"
        :max-height="520"
      >
        <el-table-column
          label="排名"
          type="index"
          :index="(i) => computeIndex(indexOffset, i)"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="computeIndex(indexOffset, scope.$index) === 1"
              class="rank-badge gold"
              >1</span
            >
            <span
              v-else-if="computeIndex(indexOffset, scope.$index) === 2"
              class="rank-badge silver"
              >2</span
            >
            <span
              v-else-if="computeIndex(indexOffset, scope.$index) === 3"
              class="rank-badge bronze"
              >3</span
            >
            <span v-else class="rank-number">{{
              computeIndex(indexOffset, scope.$index) || scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="企业名称"
          align="center"
          min-width="300"
        />
        <!-- 多指标列（如按荣誉） -->
        <template
          v-if="Array.isArray(rankExtraColumns) && rankExtraColumns.length"
        >
          <el-table-column
            v-for="col in rankExtraColumns"
            :key="col.prop"
            :prop="col.prop"
            :label="col.label"
            :align="col.align || 'center'"
            :width="col.width || 160"
            :min-width="col.minWidth"
          >
            <template slot-scope="scope">
              <span>{{ formatRankThird(scope.row[col.prop]) }}</span>
            </template>
          </el-table-column>
        </template>
        <!-- 单指标列（默认回退） -->
        <template v-else>
          <el-table-column
            :prop="rankThirdProp"
            :label="rankThirdLabel"
            align="center"
            width="260"
          >
            <template slot-scope="scope">
              <span>{{ formatRankThird(scope.row[rankThirdProp]) }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  name: "RankingTable",
  props: {
    // 多表模式：每种状态一个对象 { title, mode, data, rankExtraColumns, rankThirdLabel, rankThirdProp, maxHeight }
    multiTables: {
      type: Array,
      default: () => [],
    },
    // 单表模式下的排名起始偏移（默认从1开始展示，即偏移0）
    indexOffset: {
      type: Number,
      default: 0,
    },
    mode: {
      type: String,
      default: "rank",
    },
    data: {
      type: Array,
      default: () => [],
    },
    // 按荣誉等模式：可传多个扩展列 [{ label, prop, width, minWidth, align }]
    rankExtraColumns: {
      type: Array,
      default: () => [],
    },
    rankThirdLabel: {
      type: String,
      default: "近一年受理白蚁任务单总量",
    },
    rankThirdProp: {
      type: String,
      default: "taskCount",
    },
  },
  methods: {
    parseContact(contact) {
      if (!contact) return [];
      if (Array.isArray(contact)) return contact;
      return contact
        .split(/[,，]/)
        .map((item) => item.trim())
        .filter(Boolean);
    },
    formatRankThird(value) {
      if (value === null || value === undefined) return "";
      if (typeof value === "number") {
        if (value >= 0 && value <= 1) {
          return Math.round(value * 100) + "%";
        }
        return String(value);
      }
      return String(value);
    },
    computeIndex(offset, index) {
      const base = typeof offset === "number" ? Number(offset) : 0;
      const idx = Number(index);
      if (Number.isNaN(idx)) return 0;
      return base + idx + 1;
    },
  },
};
</script>

<style scoped lang="scss">
.table-section {
  flex: 1;
  width: 100%;
  min-height: 0;
  background-color: #fff;
  margin-top: 16px;
  border-radius: 6px;
  border: 1px solid #cbe4f9;
  box-shadow: 0 6px 14px rgba(16, 154, 255, 0.08);
  overflow: auto;
  padding: 0;
  ::v-deep .el-table {
    .el-table__header-wrapper th,
    .el-table__fixed-header-wrapper th {
      background-color: #ccedef !important;
      color: #333 !important;
    }
  }
}

.table-section.is-default {
  padding: 0;
}

.default-table,
.rank-table {
  width: 100%;
  border-collapse: collapse;
}

.default-table thead tr {
  background: linear-gradient(180deg, #7ec6ff 0%, #3fa2ef 100%);
  color: #fff;
  height: 44px;
}

.default-table th,
.default-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  text-align: center;
  border: 1px solid #cfe6ff;
}

.default-table tbody tr:nth-child(even) {
  background-color: #f3f9ff;
}

.default-table tbody tr:hover {
  background-color: #e6f4ff;
}

.contact-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rank-table thead {
  background: linear-gradient(135deg, #91d5ff 0%, #69c0ff 100%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.rank-table th {
  padding: 14px 16px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.rank-table th:last-child {
  border-right: none;
}

.rank-table tbody tr {
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
}

.rank-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.rank-table tbody tr:hover {
  background-color: #e6f7ff;
}

.rank-table td {
  padding: 14px 16px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #dcdfe6;
}

.rank-table td:last-child {
  border-right: none;
}

.rank-col {
  width: 120px;
}

.name-col {
  min-width: 300px;
}

.task-col {
  width: 260px;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  background-image: url("~@/assets/images/1@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border-radius: 0;
  box-shadow: none;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

.rank-badge.gold {
  background-image: url("~@/assets/images/1@2x.png");
}
.rank-badge.silver {
  background-image: url("~@/assets/images/2@2x.png");
}
.rank-badge.bronze {
  background-image: url("~@/assets/images/3@2x.png");
}

.rank-number {
  display: inline-block;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
</style>
